<template>
  <div class="authContainer">
    <div class="timeCont" v-if="showCont && !showTimeOut">
      <div class="bannerCont">
        <img class="bannerImg" src="/img/banner/4.png" />
      </div>
      <div class="formCont" v-if="userInfo.is_auth == 1">
        <div class="formTitle">请您使用有效身份证信息认证</div>
        <div class="formInput">
          <div class="inputName">姓名</div>
          <input
            v-model="name"
            type="text"
            maxlength="5"
            placeholder="请输入真实姓名"
          />
        </div>
        <div class="formInput">
          <div class="inputName">身份证号</div>
          <input
            v-model="id_card"
            type="text"
            maxlength="18"
            placeholder="请输入身份证号"
          />
        </div>
        <div class="saveBtn" @click="saveFn" v-if="userInfo.is_auth == 1">
          免费实名认证
        </div>
      </div>
      <div class="formCont" v-if="userInfo.is_auth == 2">
        <div class="formTitle">
          <span class="iconfont icon-anquantonggao"></span>
          <span>恭喜您～已完成实名认证！</span>
        </div>
        <div class="formInput">
          <div class="inputName">姓名</div>
          <div class="authVal">{{ userInfo.real_name }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">身份证号</div>
          <div class="authVal">{{ userInfo.id_card }}</div>
        </div>
        <div class="saveBtn" @click="balckFn">返回</div>
      </div>
    </div>
    <subLoad v-if="showSub"></subLoad>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import { identityAuth, My } from "@/http/api";
import subLoad from "@/components/public/subLoad.vue";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import {
  showSuccessToast,
  showToast,
  showConfirmDialog,
  showDialog,
} from "vant";
export default {
  components: { subLoad, load, getTimeOut },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showSub: false,
      name: "",
      id_card: "",
      userInfo: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    balckFn() {
      this.$router.back();
    },
    checkCar() {
      let reg =
        /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
      if (reg.test(this.id_card)) {
        return true;
      } else {
        return false;
      }
    },
    saveFn() {
      if (this.name.length < 2) {
        showToast("请输入真实姓名");
        return false;
      } else if (!this.checkCar()) {
        showToast("身份证不正确");
        return false;
      }
      let data = {
        name: this.name,
        idcard: this.id_card,
      };
      if (!this.showSub) {
        this.showSub = true;
        identityAuth(data)
          .then((res) => {
            if (res.data.code == 1) {
              showSuccessToast("认证成功");
              this.getData();
            } else {
              showToast(res.data.msg);
            }
            this.showSub = false;
          })
          .catch(() => {
            this.showSub = false;
          });
      }
    },
    getData() {
      My()
        .then((res) => {
          if (res.data.code == 1) {
            this.userInfo = res.data.data;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
    // this.showTimeOut = true;
    // this.showCont = true;
  },
};
</script>
<style scoped lang="less">
.authContainer {
  background-color: #e7eeff;
  min-height: 100vh;
  .timeCont {
    padding-bottom: 2rem;
    box-sizing: border-box;
  }
  .bannerCont {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .bannerImg {
      width: 100%;
    }
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    position: relative;
    top: -1rem;
    padding: 1rem 4%;
    border-radius: 0.75rem;
    box-sizing: border-box;
    .formTitle {
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 1rem;
      .iconfont {
        color: #86a9fb;
        font-size: 1rem;
        margin-right: 0.25rem;
        position: relative;
        top: 0.05rem;
      }
    }
    .formInput {
      display: flex;
      padding: 0.75rem 1rem;
      box-sizing: border-box;
      align-items: center;
      width: 100%;
      background-color: #f6f7f9;
      margin-bottom: 1rem;
      border-radius: 1.5rem;
      .inputName {
        width: 3.2rem;
      }
      input {
        flex: 1;
        width: 3rem;
        border: none;
        background: none;
        outline: none;
      }
    }
    .saveBtn {
      width: 100%;
      padding: 0.75rem 0;
      text-align: center;
      background-image: linear-gradient(to right, #cbd8f7, #86a9fb);
      color: #fff;
      border-radius: 2rem;
    }
    .openBtn {
      width: 100%;
      padding: 0.75rem 0;
      text-align: center;
      // background-image: linear-gradient(to right, #cbd8f7,#86a9fb);
      color: #86a9fb;
      border: 1px solid #86a9fb;
      border-radius: 2rem;
      margin-top: 0.75rem;
    }
  }
  .tipCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    padding: 1rem 4%;
    border-radius: 0.75rem;
    box-sizing: border-box;
    margin-top: -3rem;
    .tipHead {
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 1rem;
      color: #86a9fb;
    }
    .tipItem {
      margin-bottom: 0.5rem;
      .redText {
        color: #86a9fb;
      }
    }
  }
}
</style>
